/* 
成绩录入

1 查询成绩
 1 打开页面的调用一个函数 发送请求 获取数据 渲染页面
 2 修改成绩
    1 双击 单元格 开始修改 
      1 找准元素 score类 再去绑定双击事件- 有些元素 不需要 双击事件
      2 双击事件触发了
      3 控制单元格对应的input标签显示 即可 
      4 控制input标签 里面的value 等于 单元格里面的内容
      5 控制被点击的input标签 获得焦点！！！

    2 失去焦点 结束修改
    1 给input标签绑定 失去焦点事件 （不能使用事件委托了，因为只有表单标签存在失去焦点事件）
    2 获取到输入框里面的内容，拼接成参数 发送给后端 完成编辑
    3 后端响应 编辑成功
        1 弹出一个提示
        2 重新获取最新的数据
*/
const tbody = document.querySelector('tbody');


function getScoreList(){
  axios.get('/score/list').then((result) => {
    // console.log(result);
    if(result.data.code === 0) {
      console.log(result.data.data);
      const obj = result.data.data;
      // 遍历对象 生成html标签
      let html = '';
      for (const key in obj) {
        // key = 属性名
        const tempHTML = obj[key].score.reduce(
          (h,v,i) => 
          h + 
          `<td class="score">${v} <input type="text" data-batch=
          "${i + 1}" data-id="${key}"/></td>`,
          ''
        );
        // td 标签的 拼接成 完整的tr；
        html += `
        <tr> 
        <th scope="row">${key}</th>
        <td>${obj[key].name}</td>
        ${tempHTML}
        </tr>`;
      }
      // 把 html渲染出来
      tbody.innerHTML = html;


      // 获取tbody里面所有的input  遍历方式绑定 事件
      const inputs = document.querySelectorAll('tbody input'); 
      inputs.addEventListener('blur',function(e){
        // 准备接口要求的数据
        const data ={
          // 学员id
          stu_id: input.dataset.id,
          // 成绩的次数
          batch: input.dataset.batch,
          // 分数
          score:input.value,
        }
      })
    }
  })
};

getScoreList();

// 给分数 单元格绑定双击事件
tbody.addEventListener('dblclick',function(e) {
  const dom = e.target;
  if(dom.nodeName === 'TD' && dom.classList.contains('score')) {
    const input = dom.querySelector('input');
    input.style.display = 'block';
    // 设置 input标签的value 等于当前单元格内的文本
    // console.log(dom.innerHTML);  // 获取到的内容可能会包含标签
    // console.log(dom.innerText);  // 只获取文本而已
    input.value = dom.innerText;
    // 获得焦点！！！ 可在window查询
    // console.log(window);
    input.focus();
  }
})


